<html>
<head>
<title>4l8r - a diary study tool</title>
<style>
a:link {color: #990000}
a:visited {color: #990000}
a:hover {color: #CC6666}
a:active {color: #CC6666}
h1 {
  font-family: calibri,verdana,sans-serif;
  font-size: 18pt;
  color: #990000;
}
h2 {
  font-family: calibri,verdana,sans-serif;
  font-size: 16pt;
  color: #990000;
}
h3 {
  font-family: calibri,verdana,sans-serif;
  font-size: 14pt;
  color: #990000;
}
p {
  font-family: calibri,verdana,sans-serif;
  font-size: 11pt;
}
.small {
  font-size: 9pt;
}
.serif {
  font-family: georgia,garamond,serif;
}
.content {
  position: absolute;
  left: 0px;
  top: 10%;
}
.footer {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
}
</style>
</head>
<body bgcolor="#b3b3b3" marginheight=0 marginwidth=0 leftmargin=0 rightmargin=0 topmargin=0>
<table class="content" bgcolor="#FFFFFF" width="100%" cellpadding=20>
<tr>
<td align="right" valign="center" width="50%">
<img src="images/4l8r_main.gif"/>
</td>
<td align="left" valign="center" width="50%">
<h1>Login</h1>
<form action='https://www.4l8r.org/login' method='post'>
<p>
<table border="0" cellpadding="5">
<tr>
<td align="right"><span class="small">Phone&nbsp;Number<br/>or&nbsp;Username</span></td><td><input type='text' name='username'></td>
</tr>
<tr>
<td align="right"><span class="small">Password</span></td><td><input type='password' name='password'></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type='submit' value='Log in' name='authform'/></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><span class="small"><a href="https://www.4l8r.org/login/forgot">I forgot my password</a></span></td>
</tr>
</table>
</p>
</form>
</td>
</tr>
</table>
<p class="footer" align="center">&nbsp;</p>
</body>
</html>
